<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="ztree/css/demo.css" type="text/css">
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
<script type="text/javascript" src="ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript"
	src="ztree/js/jquery.ztree.excheck.min.js"></script>
<script type="text/javascript"
	src="ztree/js/jquery.ztree.exedit.min.js"></script>

<title>ztree练习</title>
<style type="text/css">
div#rMenu {
	position: absolute;
	visibility: hidden;
	top: 0;
	background-color: #555;
	text-align: left;
	padding: 2px;
}

div#rMenu a {
	cursor: pointer;
	list-style: none outside none;
}
</style>
</head>
<body>

	<div data-options="region:'west',split:true"
		style="width: 200px; height: 400px">
		<ul id="tree" class="ztree"
			style="width: 230px; overflow: auto; background: #FFFFFF; border: 0"></ul>
	</div>
	<div>
		搜索<input type="text" onchange="searchTreeNode()" id="treeNodeName" />
	</div>

</body>

<SCRIPT type="text/javascript">
	//搜索节点方法	
	function searchTreeNode() {
		var treeObj = $.fn.zTree.getZTreeObj("tree");//获取id为tree的树
		/**
			参数: key:需要精确匹配的属性名称  
				value: 需要精确匹配的属性值
				parentNode  类型JSON 可以指定在某个父节点下的子节点中搜索
		 **/
		var nodes = treeObj.getNodesByParam("level", $("#treeNodeName").val(), null);
		for (var i = 0; i < nodes.length; i++) {
			nodes[i].highlight = true;//设置定义属性highlight,标记为true
			treeObj.updateNode(nodes[i]);//更新树
			// 展开搜索到的节点的父节点
		    treeObj.expandNode(nodes[i].getParentNode(),true);
		}

	}

	//方法要写在setting上面
	//-----------ztree事件开始---------	
	//单击事件
	function zTreeOnClick(event, treeId, treeNode) {
		//alert("节点名称："+treeNode.name+"----"+"节点的id值："+treeNode.id);
		if (treeNode.isLastNode) {//判断是否为末节点

		}
	}
	//设置字体颜色方法
	function setFontCss(treeId, treeNode) {
		//如果是符合搜索结果的,之前已被标记为highlight = true ,更新树时就会显示出高亮样式
		return (treeNode.highlight) ? {color:"red", "font-weight":"bold", "background-color": "#ddd"} : {color:"#000", "font-weight":"normal"};	
	}

	//获取勾选的id
	function onCheck(e, treeId, treeNode) {
		var treeObj = $.fn.zTree.getZTreeObj("tree"), //获取节点树
		nodes = treeObj.getCheckedNodes(true), //获取被勾选的集合
		v = "";
		for (var i = 0; i < nodes.length; i++) {
			//v+=nodes[i].name + ",";
			v += nodes[i].id + ",";
			// alert(nodes[i].id); //获取选中节点的值
		}
		alert(v.substring(0, v.length - 1));//截取最后一个逗号
	}

	//-----------ztree事件结束---------	

	var setting = {
		//使父子节点通过简单json数据区分
		data : {
			simpleData : {
				enable : true
			}
		},
		showLine : true, //是否显示节点间的连线
		check : {
			enable : true
		//单复选框
		},
		//设置显示样式
		view : {
			fontCss : setFontCss
		//函数确定符合条件的字体颜色
		},
		//为子节点添加单击事件
		callback : {
			onClick : zTreeOnClick,
			//onRightClick : zTreeOnRightClick   //右键事件
			onCheck : onCheck
		}

	};

	var treeNodes;

	$(function() {
		$.ajax({
			async : false,
			cache : false,
			type : 'POST',
			dataType : "json",
			url : "tree",//请求的action路径  
			error : function() {//请求失败处理函数  
				alert('请求失败');
			},
			success : function(data) { //请求成功后处理函数。    
				treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes  
				//   alert(treeNodes);  

			}
		});

		$.fn.zTree.init($("#tree"), setting, treeNodes);

	});
</SCRIPT>
</html>